<template>
  <div class="orderBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/mamger' }"
        >订单管理</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/users' }">订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row type="flex">
        <el-col :span="8">
          <div class="grid-content bg-purple title" style="text-align: left">
            <el-input
              clearable
              placeholder="请输入内容"
              class="input-with-select"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>

      <el-table :data="orderlist" border style="width: 100%">
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="200">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="120">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款" width="120">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              v-if="scope.row.pay_status == '1'"
              >已付款</el-button
            >
            <el-button size="mini" type="danger" v-else>未付款</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="120">
        </el-table-column>
        <el-table-column prop="create_time" label="下单时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="修改地址"
              placement="top"
            >
              <el-button
                icon="el-icon-edit"
                type="primary"
                @click="handleEditAddress(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="dark"
              content="物流信息"
              placement="top"
            >
              <el-button
                icon="el-icon-location"
                type="danger"
                @click="handleEditPostMan(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--  分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="orderParams.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="orderParams.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalpage"
    >
    </el-pagination>

    <!--  弹框修改地址 -->

    <el-dialog title="收货地址" :visible.sync="addressDialog">
      <el-form :model="addressForm" :rules="rules">
        <el-form-item
          label="省市区/县"
          prop="address1"
          :label-width="formLabelWidth"
        >
          <!-- <el-input v-model="addressForm.address1" autocomplete="off"></el-input> -->

          <el-cascader
            v-model="addressForm.address1"
            :options="cityData"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>

        <el-form-item
          label="详细地址"
          prop="address2"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="addressForm.address2"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDecidedAddress">取 消</el-button>
        <el-button type="primary" @click="decidedAddress">确 定</el-button>
      </div>
      <!-- addressDialog = false -->
    </el-dialog>

    <!--  物流信息 -->
    <el-dialog title="物流进度" :visible.sync="postManDialog">
      <el-timeline>
        <!-- :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size" -->
        <el-timeline-item
          v-for="(activity, index) in postManList"
          :key="index"
          :timestamp="activity.ftime"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelPostManDialog">取 消</el-button>
        <el-button type="primary" @click="decidedPostManDialog"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrders, getPostMan } from "../../api/index.js";
import cityData from "./citydata";
export default {
  name: "", // keep-alive 使用的
  data() {
    return {
      orderlist: [],
      orderParams: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      totalpage: 0,
      addressDialog: false,
      addressForm: {
        address1: "",
        address2: "",
      },
      formLabelWidth: "100px",
      rules: {
        address1: [
          { required: true, message: "请输入省市区", trigger: "blur" },
        ],
        address2: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
      // cityData:cityData
      cityData,

      postManDialog: false,
      postManList: [], // 初始化物流信息
    };
  },
  created() {
    this.initOrderList();
  },

  methods: {
    async initOrderList() {
      let {
        data: { goods, pagenum, total },
        meta: { status },
      } = await getOrders(this.orderParams);

      if (status != 200) return this.$message.error("请求失败");

      this.orderlist = goods;
      this.orderParams.pagenum = pagenum * 1;
      this.totalpage = total;
    },

    //分页功能
    handleSizeChange(val) {
      this.orderParams.pagesize = val;
      this.initOrderList();
    },
    handleCurrentChange(val) {
      this.orderParams.pagenum = val;
      this.initOrderList();
    },
    //修改地址
    handleEditAddress(i, scope) {
      this.addressDialog = true;
    },
    //三级联动获取选择后的值
    handleChange(value) {
      console.log(value);
    },

    // 真正的更改地址
    decidedAddress() {
      this.addressDialog = false;
    },
    cancelDecidedAddress() {
      this.addressDialog = false;
      this.addressForm = {};
    },

    //物流信息
    async handleEditPostMan() {
       this.postManDialog = true;
      let {data,meta:{status}}  = await getPostMan({ id:1106975712662 });
      // data  没有 color  字段
      if(status!=200) return  this.$message.error('请求失败')
      this.postManList = data;

     
    },

    cancelPostManDialog() {
      this.postManDialog=false

    },
    decidedPostManDialog() {
       this.postManDialog=false
    }
  },
  filters: {},
};
</script>

<style scoped lang="css">
.el-card {
  width: 1200px;
}
.orderBox {
  padding-left: 20px;
}

.el-cascader {
  width: 100%;
}
</style>
